<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>定时翻滚图片</title>
  <style>	
	img{
		width:450px;
		height:260px;
		margin: 10px;
	}
	ul{
		list-style:none;
	}
	.show{
		display:block;
	}
	.clear{
		display:none;
	}
  </style>
 </head>
 <body>
	<ul>
		<li class="clear">
			<img src="https://imgsa.baidu.com/news/q%3D100/sign=c23ac62ebf1c8701d0b6b6e6177e9e6e/7acb0a46f21fbe09872abbde67600c338644ad80.jpg"/>
			<br/>
			重庆大火
		</li>
		<li class="clear">
			<img src="https://imgsa.baidu.com/news/q%3D100/sign=b39f19ae0523dd542773a368e108b3df/a5c27d1ed21b0ef46359fd94d1c451da80cb3e42.jpg"/>
			<br/>深圳博览会
		</li>
		<li class="clear">
			<img src="https://imgsa.baidu.com/news/q%3D100/sign=9165c8ce5582b2b7a19f3dc401accb0a/8cb1cb1349540923ed7533b49e58d109b2de49df.jpg"/>
			<br/>上海博览会
		</li>
		<li class="clear">
			<img src="https://imgsa.baidu.com/news/q%3D100/sign=cdcb56d0ca5c1038227ecac28213931c/ae51f3deb48f8c54b07593e536292df5e1fe7f51.jpg"/>
			<br/>北京
		</li>
	</ul>
	<script type="text/javascript">
		var liNode = document.getElementsByTagName("li");
		var i = 0;
		liNode[i].setAttribute("class","show");
		
		function display(){
			//把所有的li样式都移除
			for(var j=0;j<liNode.length;j++){
				if(j!=i){
					liNode[j].style.display='none';//隐藏
				}
			}
			liNode[i].style.display='block';  //显示图片

			if(i==liNode.length-1){ //初始化
				i=-1;
			}
			i++;
		}

		//定时器
		window.setInterval("display()",3000);


	</script>
 </body>
</html>
